<template>
  <view-card :title="title">
    <header class="topic_header">
      <div v-for="(item,index) in data" :key="index">
        <div>
          <dv-decoration-9 style="width:130px;height:130px;">{{item.participateCount}}人</dv-decoration-9>
          <div>{{item.title}}</div>
        </div>
      </div>
    </header>
    <main class="topic_main" v-if="this.config.data.length > 0">
      <dv-scroll-board :config="config" style="width:100%;height:30vh;" />
    </main>
  </view-card>
</template>

<script>
import api from '@/network/api';
  export default {
    name: "hotTopic",
    data() {
      return {
        title: '热门话题',
        data: [{
          title: '最后的水族馆',
          participateCount: 2812
        }, {
          title: '云村夜话',
          participateCount: 178398
        }, {
          title: '黑胶点唱机',
          participateCount: 10463
        }],
        config: {
          data: [],
          // align: ['center']
        }
      }
    },
    mounted(){
      api.getHotTopic().then(response=>{
        let resData = this.$jsonToParse(response['hot'])
        let threeTopic = []
        for (let i = 0;i < 3;i++){
          let topic = {
            title: resData[i]['title'],
            participateCount: resData[i]['participateCount']
          }
          threeTopic.push(topic)
        }
        this.data = threeTopic;
        for (let item of resData){
          this.config.data.push([item['title'],item['text'][0]])
        }
        // for (let i = 0;i < resData.length;i++){
        //   let topic = [`${resData[i]['title']}`]
        //   console.log(topic)
        //   this.config.data.push(topic)
        // }
        // console.log(this.config.data)
      })
    }
  }
</script>

<style scoped>

</style>
